<template>
	<view class="wrap">
		<!-- <u-toast ref="uToast" /> -->
		<view class="red" @click="show = false" v-if="show"></view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<view class="user-wrap">
			<view class="info">
				<image class="avatar" :class="[ ger.sex == shuju.sex? 'iim' : '']" mode="aspectFill" :src="user.pic"></image>
				<view class="nickname">{{user.nickName}}
					<u-icon style="margin-left: 10rpx;" v-if="shuju.sex == 'M'" size="30" name="../../../static/boy.png" >
					</u-icon>
					<u-icon style="margin-left: 10rpx;" v-if="shuju.sex == 'F'" size="30" name="../../../static/girl.png" >
					</u-icon>
				</view>
				<view class="info_label">
					<view class="label" style="font-size: 30rpx;">
						{{shuju.sex == "M" ? "男" : "女"}} · {{shuju.age}}岁
					</view>
					<view class="label"  style="font-size: 30rpx;">
						{{shuju.province}}
					</view>
					<view class="label"  style="font-size: 30rpx;">
						{{shuju.profession}}
					</view>
				</view>
				<view class="info_intro">
					{{shuju.cityId.synopsis == "" ? "ta很神秘,什么都没留下~" : shuju.cityId.synopsis}}
				</view>
			</view>
			<!-- <view class="info4" v-if="m_id != u_id">
				<u-button v-if="mode == 0" type="primary" shape="circle" size="mini" @click="focus(u_id)">关注</u-button>
				<u-button v-if="mode == 1" type="success" shape="circle" size="mini" @click="ufocus(u_id)">已关注
				</u-button>
			</view> -->
		</view>


		<!-- 列表 -->
		<!-- <u-tabs style="height: 90rpx;" ref="tabs" active-color="#554d84" :list="list1" :is-scroll="false" :current="current" @change="change"
			></u-tabs> -->
			<view class="tabs">
				<view @click="btn(1)">
					<view :style="tabs">Ta的动态</view>
				</view>
				<view @click="btn(2)">
					<view :style="tabs1">个人相册</view>
				</view>
			</view>
		<view v-if="current==0" class="content1" >
			<view class="user_info">
				<view class="wx" >
					<view class="wxh" v-if="isUnlocked==0" >
						<view class="left">
							<view class="">
								wx：xxxxxxxxxx
							</view>
							成为VIP解锁微信
						</view>
						<view class="right" @click="jsuo()">
							解锁
						</view>
					</view>
					<view class="wxh wxh-" v-else >
						<view class="fuzhi">微信：{{wxId}}</view>
						<view class="fuzhi" @click="fuzhi(wxId)">
							复制
						</view>
					</view>
				</view>
			</view>
			<view class="liaoj">
				<view class="liaoj1">了解Ta</view>
				<view class="liaoj3">
					<view class="liaoj2">
						<view>身高/体重</view>
						<view>{{shuju.height == null ? "174" : shuju.height}}cm/{{shuju.weight/2}}kg</view>
					</view>
					<view class="liaoj2">
						<view>从事职业</view>
						<view>{{shuju.profession == "" ? "学生" : shuju.profession}}</view>
					</view>
					<view class="liaoj2">
						<view>身材</view>
						<view>{{shuju.cityId.stature == "" ? "偏瘦" : shuju.cityId.stature}}</view>
					</view>
					<view class="liaoj2">
						<view>感情状态</view>
						<view>{{shuju.cityId.single == null ? "单身" : shuju.cityId.single}}</view>
					</view>
					<view class="liaoj2">
						<view>孩子</view>
						<view>{{shuju.cityId.son == null ? "无" : shuju.cityId.son}}</view>
					</view>
					<view class="liaoj2">
						<view>学历</view>
						<view>{{shuju.cityId.education == "" ? "本科" : shuju.cityId.education}}</view>
					</view>
					<view class="liaoj2">
						<view>年收入</view>
						<view>{{shuju.cityId.income == "" ? "10万以下" : shuju.cityId.income}}</view>
					</view>
					<view class="liaoj2">
						<view>抽烟</view>
						<view>{{shuju.cityId.smoking == "" ? "不抽烟" : shuju.cityId.smoking}}</view>
					</view>
					<view class="liaoj2">
						<view>饮酒</view>
						<view>{{shuju.cityId.liquor == "" ? "不饮酒" : shuju.cityId.liquor}}</view>
					</view>
				</view>
			</view>
		</view>

		
		<!-- 个人作品 -->
		<view v-if="current==1" class="content1" >
			
			<view class="reply-box">
				<view v-if="list.imageSrcKey.length == 1"
				:class="[vip == 0 || ger.sex == shuju.sex? 'iim' : '']"
					style="padding: 20rpx;display: flex;justify-content: space-between;flex-wrap: wrap;" >
					<image @click="previewImage(index1,list.imageSrcKey)" v-for="(res1, index1) in list.imageSrcKey"
						:src="res1" mode="aspectFill" style="width: 100%;" ></image>
				</view>
				<view v-if="list.imageSrcKey.length == 2 || list.imageSrcKey.length == 4"
				:class="[vip == 0 || ger.sex == shuju.sex? 'iim' : '']"
					style="padding: 20rpx;display: flex;justify-content: space-between;flex-wrap: wrap;" >
					<image @click="previewImage(index1,res.pocUrl)" v-for="(res1, index1) in list.imageSrcKey"
						:src="res1" mode="aspectFill" style="width:334rpx;height:334rpx;margin-bottom: 10rpx;" ></image>
				</view>
				<view
					:class="[vip == 0 || ger.sex == shuju.sex? 'iim' : '']"
					v-if="list.imageSrcKey.length == 3  || list.imageSrcKey.length == 6 || list.imageSrcKey.length == 7"
					style="padding: 20rpx;display: flex;justify-content: space-between;flex-wrap: wrap;" >
					<image @click="previewImage(index1,list.imageSrcKey)" v-for="(res1, index1) in list.imageSrcKey"
						:src="res1" mode="aspectFill" style="width:220rpx;height:220rpx;margin-bottom: 10rpx;" ></image>
				</view>
				<view v-if="list.imageSrcKey.length == 5 || list.imageSrcKey.length == 8" :class="[vip == 0 || ger.sex == shuju.sex? 'iim' : '']"
					style="padding: 20rpx;display: flex;justify-content: space-between;flex-wrap: wrap;" >
					<image @click="previewImage(index1,list.imageSrcKey)" v-for="(res1, index1) in list.imageSrcKey"
						:src="res1" mode="aspectFill" style="width:220rpx;height:220rpx;margin-bottom: 10rpx;" ></image>
					<view style="width:220rpx;height:220rpx;"></view>
				</view>
					<view v-if="list.imageSrcKey.length == 9" :class="[vip == 0 || ger.sex == shuju.sex? 'iim' : '']"
					style="padding: 20rpx;display: flex;justify-content: space-between;flex-wrap: wrap;">
					<image @click="previewImage(index1,list.imageSrcKey)" v-for="(res1, index1) in list.imageSrcKey"
						:src="res1" mode="aspectFill" style="margin-bottom: 10rpx;width:220rpx;height:220rpx; filter: blur(5rpx);"></image>
				</view>
				<view v-if="list.imageSrcKey.length == 9" :class="[vip == 0 || ger.sex == shuju.sex? 'iim' : '']"
					style="padding: 20rpx;display: flex;justify-content: space-between;flex-wrap: wrap;" >
					<view @click="previewImage(index1,list.imageSrcKey),open()" v-for="(res1, index1) in list.imageSrcKey"
						class="list" style="width:220rpx;height:220rpx;margin-bottom: 10rpx;" >
						<image :src="res1" mode="aspectFill"
							style="width:220rpx;height:220rpx;margin-bottom: 10rpx;"
							:class="vip != 1 ? 'oop' : ''"> 
						</image>
						<view class="lock" v-if="vip != 1">
							成为VIP解锁动态
						</view>
					</view>
				</view>
				<u-modal v-model="show2"  title="提示" :show-confirm-button="false">
					<view class="nbs">
						<text class="nbs1">您还不是VIP</text>
						<button type="default" @click="open1(1)">去充值</button>
						<button type="default" @click="open1(2)">取消</button>
					</view>
				</u-modal>
			</view>
		</view>
		<!-- 显示加载更多 -->
		<!-- <u-loadmore :status="status" /> -->
		<!-- <u-popup v-model="show" mode="center" :border-radius='20'>
			
		</u-popup> -->
		<view v-if='show' class="xfk">
			<view class="popup-box">
				<image class="img" :src="user.pic" mode="" :class="[vip == 0 || ger.sex == shuju.sex? 'iim' : '']"></image>
				<view class="wxhao">
					微信：xxxxxxxx
				</view>
				<view class="title">
					为保护女生不被骚扰，需消耗钻石解锁
				</view>
				<view class="lock span" @click="zuan">
					消费990钻石解锁
				</view>
				<view class="vip span" @click="go">
					成为VIP免费查看
				</view>
			</view>
			<!-- <view class="red"></view> -->
		</view>
		<keyboard :show='show1' :money='990' :id='user.userId' @showstate='add()' :type="'lock'"></keyboard>
	</view>
</template>

<script>
	import keyboard from "../../../components/keyboardPay/index"
	import * as api from '@/api/api.js'
	export default {
		components: {
			keyboard
		},
		data() {
			return {
				isUnlocked:0,
				show: false,
				show1: false,
				noClick: true,
				u_id: '11', //点击用户头像,他人的id
				m_id: '11', //自己的id
				m_ava: '1',
				m_gender: '1',
				m_name: '1',
				mode: 0,
				ava: 'https://hbimg.huabanimg.com/b90fa94f6218e6aa6b66b67291bdaec69053051258d5d-GiZ3gi_fw658/format/webp',
				username: '你滴寒王',
				gender: '女',
				fans: '111',
				follow: '0',
				urls: [1],
				windowswidth: '1',
				newwidth: '1',
				two: '1',
				wxId:'1',
				scrollTop: 0,
				user: "1", //圈子动态
				list: {
					imageSrcKey: [
						
					]
				}, //个人作品
				// list1: [{
				// 		name: 'ta的动态'
				// 	},
				// 	{
				// 		name: '个人相册'
				// 	}
				// ],
				status: 'loadmore',
				current: 0,
				aPage: '1',
				bPage: '1',
				cPage: '1',
				topicCount: '1',
				yuepaiCount: '1',
				userCount: '1',
				scrollTop: 0,
				vip:0,
				show2:false,
				ger:"1",
				shuju:"1",
				tabs:'border-bottom: 10rpx solid #9d7dff;',
				tabs1:'1'
			}
		},
		onLoad(res) {
			let a
			let that = this
			this.huoqu()
			api.request({
				url: '/p/unlock',
				method: 'GET',
			}).then(set => {
				console.log(set)
				for (var arr of set.data){
					console.log(arr,res.id)
					if(res.id == arr.unlockedUserId){
						this.isUnlocked = 1
					}
				}
			})
			// if(res.ck == 1){
			// 	this.isUnlocked = 1
			// }
			//获取动态列表
			//console.log(res.uid+"页面跳转过来的值")
			this.getUser(res.id);
			this.vip = res.vip
			console.log(res.id,res.vip)
			//this.getTopic();
			uni.getStorage({
			    key: 'daad',
			    success: function (res) {
					console.log(res.data)
					that.shuju=res.data
					console.log(that.shuju)
					a = that.shuju
					console.log(a == that.shuju)
					that.huo(a)
			    }
			});
			this.shuju = a
		},
		onShow(res){
			let that = this
			api.request({
				url: '/p/user/userInfo',
				method: 'GET',
			}).then(set => {
				console.log(set)
				that.ger = set.data
				// this.list.imageSrcKey = this.ger.showPics.split(',')
				console.log(that.ger.diamondNum)
			})
			console.log(that.ger.diamondNum)
		},
		onPullDownRefresh: function() {
			this.aPage = '1' 
			this.bPage = '1'
			this.cPage = '1'
			this.getUser();
			//this.getTopic();

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},			
		//触底事件
		onReachBottom() {
			let a = (this.topicCount / 10)
			let b = (this.yuepaiCount / 10)
			let c = (this.userCount / 10)
			//圈子动态
			if (this.current == 0 && this.aPage < a) {
				this.aPage++
				console.log(this.Page)

			} else if (this.current == 1 && this.bPage < b) {
				this.bPage++
				console.log(this.Fpage)

				//个人作品
			} else if (this.current == 2 && this.cPage < c) {
				this.cPage++
				console.log(this.Fpage)

			}

		},
		methods: {
			huo(res){
				this.shuju = res
			},
			huoqu(){
				api.request({
					url: '/p/user/userInfo',
					method: 'GET',
				}).then(set => {
					this.ger = set.data
					// this.list.imageSrcKey = this.ger.showPics.split(',')
					console.log(18)
				})
			},
			fuzhi(item) {
				console.log(item) 
				  uni.setClipboardData({
				             data: item,
				             success: function() {
				                 console.log('success');
								 uni.showToast({
								 	icon: 'none',
								 	title: '复制成功'
								 });
				             }
				        });

			},
			jsuo(){
				console.log(this.ger)
				this.huoqu()
				console.log(this.ger.sex,this.shuju.sex)
				if(this.ger.sex != this.shuju.sex){
					console.log(this.m_id)
					if(this.vip == 1){
						console.log(this.m_id)
						api.request({
							url: '/p/unlock/'+this.m_id,
							method: 'POST',
							contentType:"application/json;charset=utf-8",
							// data: {
							// 	"id": this.m_id
							// }
						}).then(res => {
							// uni.showToast({
							// 	icon: 'none',
							// 	title: res.data
							// });
							api.request({
								url:"/p/unlock",
								method:'GET'
							}).then(res => {
								console.log(res)
							})
							console.log(res.data)
						});
						this.isUnlocked = 1
					}else if(this.vip == 0){
						console.log(this.ger)
						this.show = true
					}
				}else{
					uni.showToast({
						icon: 'none',
						title: '同性不可解锁'
					});
				}
				
			},
			open() {
				if(this.vip == 0){
					this.show2 = true;
				}
			},
			open1(add) {
				if(add == 1){
					uni.navigateTo({
						url: '../../vip/vip'
					})
				}
				if(this.vip == 0){
					this.show2 = false;
				}
			},
			//钻石解锁
			zuan(){
				console.log(this.ger.diamondNum)
				if(this.ger.diamondNum > 990){
					api.request({
						url: '/p/unlock/'+this.m_id,
						method: 'POST',
					}).then(res => {
						api.request({
							url: '/p/unlock',
							method: 'GET',
						}).then(set => {
							console.log(set,178551)
						})
						this.viplist = res.data
						console.log(res);
						this.add(this.m_id)
						uni.showToast({
							title: '解锁成功',
							icon: 'none'
						})
					})
					// if(this.isUnlocked == 0){
					// 	this.show = true
					// }
					// console.log(1)
				}else{
					uni.showToast({
						title: '钻石不够解锁失败',
						icon: 'none'
					})
					this.show = true
				}
			},
			add(e) {
				console.log(e)
				this.show1 = false
				this.isUnlocked = 1
				this.show = false
				this.getUser(this.m_id);
			},
			// 跳转
			go() {
				uni.navigateTo({
					url: '/pages/vip/vip'
				})
			},
			//收藏
			getSc(res) {
				let t_id = res
				console.log(res);

			},

			//列表切换
			btn(e){
				if(e == 1){
					this.tabs1 = ''
					this.tabs = 'border-bottom: 10rpx solid #9d7dff;'
					this.current = 0
						uni.request({
									url: api.baseUrl+'/users/gettopic',
									method: 'GET',
									data: {
										u_id: this.u_id
									},
									success: (res) => {
										console.log(res)
										this.commentList = res.data
									}
								})
				}else{
					this.tabs = ''
					this.tabs1 = 'border-bottom: 10rpx solid #9d7dff;'
					this.current = 1
					api.request({
								url: '/p/main/userInfo/'+this.m_id,
								method: 'GET',
								// data: {
								// 	userId: this.m_id //用户id
								// 	// currentPage: this.bPage
								// },
							}).then(res => {
								console.log(res)
								console.log(res.data.showPics)
								this.list.imageSrcKey = res.data.showPics.split(',');
								console.log(this.list)
								console.log(this.list.imageSrcKey.length)
							})
				}
			},
			// change(index) {
			// 	this.current = index;
			// 	console.log(this.current)
			// 	if (this.current == 0) {
			// 		// this.getUser();
			// 		/* 	uni.request({
			// 				url: api.baseUrl+'/users/gettopic',
			// 				method: 'GET',
			// 				data: {
			// 					u_id: this.u_id
			// 				},
			// 				success: (res) => {
			// 					this.commentList = res.data
			// 				}
			// 			}) */
			// 	} else if (this.current == 1) {
			// 		// api.request({
			// 		// 	url: '/yuePai/getYuepaiById',
			// 		// 	method: 'GET',
			// 		// 	data: {
			// 		// 		uid: this.u_id, //用户id
			// 		// 		currentPage: this.bPage
			// 		// 	},
			// 		// }).then(res => {
			// 		// 	this.yuepaiCount = res.data.total;
			// 		// })
			// 	}
			// 	//  else if (this.current == 2) {
			// 	// 	this.getZuopin();
			// 	// }
			// },

			//图片预览
			previewImage(current, photos) {
				if(this.vip == 1){
					uni.previewImage({
						current,
						urls: photos
					})
				}else{
					this.open()
				}
			},

			//信息初始化
			async getUser(id) {
				await api.request({
					url: '/p/main/userInfo/' + id,
					method: 'GET',
				}).then(res => {
					console.log(res);
					if(res.data.userLabels == ''){
						console.log('空')
					}else{
						// res.data.userLabels = res.data.userLabels.split(',')
						this.user = res.data
						console.log(this.user)
						this.m_id = res.data.userId
						this.wxId = res.data.wxId
						// this.u_id = res.data.
						}
					
					
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}
	.red{
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background: #5f5f5f99;
		width: 100%;
		height: 100%;
	}
	.xfk{
		position: fixed;
		top: 250rpx;
		left: 100rpx;
	}
	.tabs{
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
	}
	.tabs>view{
		flex: 5;
		text-align: center;
		font-size: 34rpx;
		font-weight: 900;
	}
	.tabs>view>view{
		width: 160rpx;
		text-align: center;
		margin: 0 auto;
	}
	.box {
		width: 95%;
		margin: 20rpx auto;
		border-radius: 25rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx 0;
		background-color: #fff;

		.msg {
			width: 50%;
			margin-left: 40rpx;

			.tit {
				font-size: 36rpx;
			}
		}

		.ppd {
			width: 50%;
			text-align: center;

			.tit {
				font-size: 36rpx;
			}

			.number {
				margin-top: 30rpx;
				font-size: 56rpx;
			}
		}
	}
	
	.oop {
		filter: blur(5rpx);
	}
	
	.liaoj3{
		width: 95%;
		margin-left: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.liaoj1{
		font-size: 36rpx;
		margin-left: 10rpx;
		font-weight: 600;
	}
	
	.liaoj2{
		width: 30%;
		height: 120rpx;
		background: #9d7dff;
		padding-left: 10rpx;
		padding-top: 10rpx;
		border-radius: 26rpx;
		margin-top: 20rpx;
		
		view:nth-child(1){
			color: #5cd2de;
		}
		view:nth-child(2){
			margin-top: 10rpx;
			color: pink;
		}
	}
	
	.nbs {
		padding-top: 20rpx;
		.nbs1 {
			display: inline-block;
			height: 80rpx;
			text-align: center;
			margin-left: 180rpx;
			font-size: 42rpx;
		}
	}
	
	.comment2 {
		display: flex;
		padding: 30rpx;

		.pic {
			.img_wrapper {
				width: 220upx;
				height: 150upx;
				margin-right: 15upx;
				display: inline-block;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 30rpx;

			.gd {

				.image {
					margin-left: 20rpx;
				}
			}

			.title {
				margin-bottom: 20rpx;
				margin-top: 15rpx;
				font-size: 35rpx;
				color: gray;
			}

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}

			.reply-box {

				//background-color: rgb(242, 242, 242);
				//border-radius: 12rpx;
				.list {
					position: relative;

					.lock {
						width: 80%;
						height: 80rpx;
						position: absolute;
						line-height: 20px;
						border-radius: 10px;
						background-color: #FFB100;
						color: rgba(255, 255, 255, 100);
						top: 0rpx;
						right: 0;
						bottom: 0;
						left: 0;
						margin: auto;
						font-size: 28rpx;
						text-align: center;
					}
				}

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.test {
				float: left;
				padding: 15rpx;
			}

			.img {
				display: flex;
			}

			.bottom {
				//margin-top: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}
			}
		}
	}

	.content1 {
		padding: 10px;
		background: #eeeeee;

		.reply-box {

			//background-color: rgb(242, 242, 242);
			//border-radius: 12rpx;
			.list {
				position: relative;

				.lock {
					width: 80%;
					height: 80rpx;
					position: absolute;
					line-height: 20px;
					border-radius: 10px;
					background-color: #FFB100;
					color: rgba(255, 255, 255, 100);
					top: 0rpx;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					font-size: 28rpx;
					text-align: center;
				}
			}

			.item {
				padding: 20rpx;
				border-bottom: solid 2rpx $u-border-color;

				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;

				.more {
					margin-left: 6rpx;
				}
			}
		}

		.cnt {
			padding: 10px;
			position: relative;

			.title {
				font-size: 15px;
			}

			.text {
				font-size: 15px;
				margin-top: 5px;
				display: flex;
				position: relative;
			}


		}
	}


	.contents {
		text-align: center;
		font-size: 32upx;
		color: #6b6b6b;
	}
	
	.iim{
		filter: blur(10rpx);
	}
	
	.comment {
		width: 95%;
		margin: auto;
		background: #ffffff;
		display: flex;
		border-radius: 20rpx;
		//padding: 30rpx;
		//margin-top: 10rpx;
		margin-bottom: 20rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		margin-top: 20rpx;

		.grid-text {
			font-size: 28rpx;
			margin-top: 4rpx;
			color: $u-type-info;
		}

		.pic {
			.img_wrapper {
				width: 220upx;
				height: 150upx;
				margin-right: 15upx;
				display: inline-block;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.left {
			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}

		.right {
			flex: 1;
			//padding-left: 20rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.name {
					position: absolute;
					left: 110rpx;

				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				//margin-bottom: 10rpx;
				margin-left: 10rpx;
				margin-top: 15rpx;
				margin-bottom: 15rpx;
			}

			.reply-box {

				//background-color: rgb(242, 242, 242);
				//border-radius: 12rpx;
				.list {
					position: relative;

					.lock {
						width: 80%;
						height: 80rpx;
						position: absolute;
						line-height: 20px;
						border-radius: 10px;
						background-color: #FFB100;
						color: rgba(255, 255, 255, 100);
						top: 0rpx;
						right: 0;
						bottom: 0;
						left: 0;
						margin: auto;
						font-size: 28rpx;
						text-align: center;
					}
				}

				.item {
					padding: 20rpx;
					border-bottom: solid 2rpx $u-border-color;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.test {
				float: left;
				padding: 15rpx;
			}

			.img {
				display: flex;
			}

			.bottom {
				//margin-top: 20rpx;
				// margin-left: 10rpx;
				// display: flex;
				// font-size: 24rpx;
				// color: #9a9a9a;
				// margin-bottom: 10rpx;

				.reply {
					color: #5677fc;
					margin-left: 10rpx;
				}

				.weibo-handle {
					display: flex;
					//padding-top: 15rpx;
					font-size: 28rpx;
					padding-bottom: 25rpx;
				}

				.weibo-handle image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}

				.weibo-handle view {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.weibo-handle .comment-group {
					background: #ffffff;
				}

				.weibo-handle .praise-group {
					background: #ffffff;
				}
			}
		}
	}



	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		z-index: 9;
		background: #554d84;
		background-size: cover;

		.info_intro {
			color: #fff;
			margin: 20rpx 0;
		}

		.info_label {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin: auto 0;
			margin-top: 10rpx;

			.label {
				text-align: center;
				height: 45rpx;
				line-height: 40rpx;
				margin-right: 10rpx;
				margin-bottom: 5rpx;
				padding: 0 15rpx;
				background-color: #3b3b43;
				color: #feb242;
				font-size: 10rpx;
				border-radius: 5rpx;
			}
		}

		.info2 {

			.identity {
				//color: #fff;
				font-size: 28rpx;
			}
		}

		.info4 {}

		.setting {
			color: #fff;
			top: 60rpx;
			left: 60rpx;
			font-size: 50rpx;
		}

		.info {
			text-align: center;
			top: 85rpx;


			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.nickname {
				color: #fff;
				font-size: 28rpx;
			}
		}

	}

	.user_info {
		width: 95%;
		display: flex;
		margin: auto;

		.wx {
			width: 100%;
			margin: auto;
			display: flex;
			margin-bottom: 20rpx;

			.wxh {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				width: 100%;
				height: 100rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 177, 0, 100);
				color: rgba(255, 255, 255, 100);
				font-size: 28rpx;
				text-align: center;

				.left {
					margin: 10rpx;
					color: #3b3b43;
				}

				.right {
					width: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 10rpx;
					background-color: #3b3b43;
					margin: auto 0;
				}
			}

			.wxh- {
				line-height: 100rpx;
			}
		}




	}

	.popup-box {
		padding: 20rpx;
		width: 560rpx;
		margin: auto;
		text-align: center;
		border: 1rpx solid #FF9900;
		border-radius: 20rpx;
		background-color: #242329;

		.name {
			font-size: 40rpx;
			margin: 10rpx 0;
		}

		.img {
			width: 220rpx;
			height: 220rpx;
			margin: auto;
			margin-top: 40rpx;
		}

		.wxhao {
			width: 300rpx;
			height: 56rpx;
			margin: 30rpx auto;
			line-height: 56rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 177, 0, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 28rpx;
			text-align: center;
		}

		.lock {
			margin-top: 10rpx;
			border: 2rpx solid #feb242;
			color: #feb242;
		}

		.vip {
			background-color: #feb242;
			color: #242329;
		}

		.title {
			text-align: center;
			color: #feb242;
			font-size: 20rpx;
		}

		.span {
			width: 400rpx;
			height: 80rpx;
			margin: 20rpx auto;
			line-height: 80rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}
</style>
